Embed API examples

Each example is a live map you can use, followed by the complete page that produces it. They all drive the same published map - 2,480 world cities and 233 countries from Natural Earth - so you can see how much one map can do from the page around it.

Example Shows
Display a map Mount a published Icon Map in a page with one call and read back what the map will answer.
Fly to a location Drive the camera of an embedded Icon Map: fly to a place, frame a bounding box or a whole layer, and read the view back.
Toggle layers Build your own layer switcher for an embedded Icon Map from the layers the map reports, and keep it in sync with the reader.
Filter with slicers Drive an embedded Icon Map's slicers from your own filter UI and keep the two in step, in both directions.
Filter from your page Apply declared filters to an embedded Icon Map from your own page, and see an undeclared filter refused.
Select and highlight Cross-highlight a list on your page with features on an embedded Icon Map, in both directions.
Bookmarks, scenes and tours Apply the author's bookmarks, capture and restore your own views, copy a link to the current view and play a tour in an embedded Icon Map.
Restyle the embed Switch basemaps, hide the embedded Icon Map's own controls, draw your own legend from the legend data and export the map as an image.
Popup commands and events Add your own action to an embedded Icon Map's feature popup and watch the events it raises, each with a reason.

Using the code

Every listing is a complete HTML page. Until the SDK is on npm it is hosted here: https://www.icon-map.com/js/iconmap-embed/2/iconmap-embed.umd.min.js (about 17 KB, no dependencies; it defines one global, IconMapEmbed).

To run an example against your own map:

  1. Publish the map from Icon Map and add your site to its allowed origins.
  2. Replace "pub_..." with your publish id.
  3. Replace the layer, slicer and field names with your map's - or better, build the UI from getLayers(), getSlicers() and getFilterSchema() as several of the examples do.

New to the API? Start with Getting started.